<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:blut="http://github.com/blutorange"
	xmlns:xi="http://www.xima.de/taglib/xfc"
	xmlns:p="http://primefaces.org/ui" xmlns:o="http://omnifaces.org/ui"
	xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
	xmlns:pe="http://primefaces.org/ui/extensions"
	template="./template.xhtml">

	<f:metadata>
		<f:viewAction actionListener="#{testBean.setUiLanguage('ja')}"/>
	</f:metadata>

	<ui:param name="logXhr" value="true"/>

	<ui:define name="headLast">
		<h:outputScript name="extender.js" />
	</ui:define>
	
	<ui:define name="monaco">
		<div style="display:grid;grid-template-columns: 1fr 1fr 1fr;grid-auto-rows:1fr;grid-gap:10px;height: 100%;">
			<div style="height:100%;outline:1px solid #333;">
				<blut:monacoEditor widgetVar="monaco" id="monaco"
					value="#{testBean.code}" width="100%" autoResize="true"
					editorOptions="#{testBean.editorOptions}"
					height="100%"
					uiLanguage="#{testBean.uiLanguage}" extender="createExtenderBasic()" />
			</div>
			<div style="height:100%;outline:1px solid #333;">
					<blut:monacoEditor widgetVar="monaco2" id="monaco2"
					value="console.log('more code')" width="100%" autoResize="true"
					editorOptions="#{testBean.editorOptions}"
					height="100%"
					uiLanguage="#{testBean.uiLanguage}" extender="createExtenderBasic()" />
			</div>
			<div style="height:100%;outline:1px solid #333;">
					<blut:monacoEditor widgetVar="monaco3" id="monaco3"
					value="function fibonacci(a,b) {return a+b}" width="100%" autoResize="true"
					editorOptions="#{testBean.editorOptions}"
					height="100%"
					uiLanguage="#{testBean.uiLanguage}" extender="createExtenderBasic()" />
			</div>
			<div style="height:100%;outline:1px solid #333;">
					<blut:monacoEditor widgetVar="monaco4" id="monaco4"
					value="postMessage('foobar');" width="100%" autoResize="true"
					editorOptions="#{testBean.editorOptions}"
					height="100%"
					uiLanguage="#{testBean.uiLanguage}" extender="createExtenderBasic()" />
			</div>
			<div style="height:100%;outline:1px solid #333;">
				<h:panelGroup id="panel5" layout="block" style="height:100%;">
					<ui:fragment rendered="#{not testBean.rendered}">
						<p:commandButton id="showEditor5" value="Load another editor"
							actionListener="#{testBean.toggleRendered}"
							process="@this" update="@form:panel5"
							style="width:100%;height:100%;"/>
					</ui:fragment>
					<ui:fragment rendered="#{testBean.rendered}">
						<blut:monacoEditor widgetVar="monaco5" id="monaco5"
						value="alert('even more code')" width="100%" autoResize="true"
						editorOptions="#{testBean.editorOptions}"
						height="100%"
						uiLanguage="#{testBean.uiLanguage}" extender="createExtenderBasic()" />		
					</ui:fragment>
				</h:panelGroup>
			</div>
			<div style="height:100%;outline:1px solid #333;">
				<h:panelGroup id="panel6" layout="block" style="height:100%;">
					<ui:fragment rendered="#{not testBean.rendered2}">
						<p:commandButton id="showEditor6" value="Load another editor"
							actionListener="#{testBean.toggleRendered2}"
							process="@this" update="@form:panel6"
							style="width:100%;height:100%;"/>
					</ui:fragment>
					<ui:fragment rendered="#{testBean.rendered2}">
						<blut:monacoEditor widgetVar="monaco6" id="monaco6"
						value="document.querySelector('body div')" width="100%" autoResize="true"
						editorOptions="#{testBean.editorOptions}"
						height="100%"
						uiLanguage="#{testBean.uiLanguage}" extender="createExtenderBasic()" />		
					</ui:fragment>
				</h:panelGroup>
			</div>
		</div>
	</ui:define>
	
	<ui:define name="script">
		<script>
		window.testCase = function() {
        	log("---(START)---");
			log("4 monaco editors should be visible");
			log("The content of each editor should be different")
			log("Only one (1) request should have been made to each of the following URLs:");
			log("    /monaco/javax.faces.resource/monacoEditor/locale/ja.js");
			log("    /monaco/javax.faces.resource/monacoEditor/editor.js.xhtml");
			log("Click on one of the buttons 'Load another editor'");
			log("Only the following request should be made:");
			log("    /monaco/test8.xhtml");
			log("Click on the other button 'Load another editor', same request as above should be made");
			log("Content of the two new editors should be different from the others.");
			log("Go to a new line in the first (top-left) editor, and start entering 'testbar'. This should bring a the function 'testbar' as a suggestion while typing.");
			log("Go to a different editor, entering 'testbar' should bring up a suggestion as well")
			log("Select language 'fr' and click on update");
			log("Only one (1) request should have been made to each of the following URLs:");
			log("    /monaco/javax.faces.resource/monacoEditor/locale/fr.js");
			log("    /monaco/javax.faces.resource/monacoEditor/editor.js.xhtml");
			log("The editors should now be displayed in French: click right to bring up the context menu which should now contain French text");
			log("----(END)----")
        };
	    </script>
	</ui:define>
</ui:composition>